<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>nativeCRUD</title>
        <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
        <link rel="stylesheet" href="${path}yq-big/static/css/el-com.css">
        <link rel="stylesheet" href="${path}yq-big/static/css/style.css">

        <script src="//unpkg.com/vue@next"></script>
        <script src="//unpkg.com/element-plus"></script>
        <script src="//unpkg.com/@element-plus/icons-vue"></script>
        <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
        <script src="//unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
      <div id="list">
        <big-page :table-detail="tableDetail" :pagination-detail="paginationDetail" :operation-detail="operationDetail" style="padding: 10px" @change-page="changePage" :form-detail="formDiaDetail"></big-page>
      </div>
      <script type="module">
        import bigPage from '/yq-big/components/page/bigPage.js';
        import request from '/yq-big/utils/request.js'
        const List = {
          data() {
            return{
              tableDetail: {
                  tableData: [],
                  tableLabel: [
                      {
                          label: "编号",
                          prop: 'id',
                      }, {
                          label: "姓名",
                          prop: 'name',
                      }, {
                          label: "创建时间",
                          prop: 'createTime',
                      }
                  ],
                  operationDetail: [
                      {
                          name: '详情',//按钮显示内容
                          icon: 'Place',//按钮前图标
                          method: this.detailClick
                      }, {
                          type: 'conceal',//操作台下拉
                          name: '更多',
                          icon: 'Orange',
                          detail: [//下拉数据
                              {
                                  name: '修改数据',
                              }, {
                                  name: '删除',
                                  icon: 'Delete',
                                  method: this.delClick//按钮点击触发事件
                              }
                          ]
                      },
                  ],
              }
            }
          },
            mounted(){
              this.getList()
            },
          methods: {
            getList(){
                request({
                    url:'native/list',

                }).then((res)=>{
                    this.tableDetail.tableData=res.data
                })
            },
              listClick() {
                  console.log("查看列表详情");
              },
          },
            components:{
              bigPage
            }
        }
        const list = Vue.createApp(List);
        list.use(ElementPlus, {
            locale: ElementPlusLocaleZhCn,
        });
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            list.component(key, component)
        }
        list.mount("#list");
      </script>
    </body>
</html>